import { PureComponent } from "react";
import { isNull, handleSelect } from "../../utils/helper"
import MySelectOther from "./MyForm/MySelectOther"
interface Props {
	isReset: boolean,
	fd: object,
	formData: object,
	field: string[],
	dataset_key?: string,
	getFieldValue: Function,
	setFieldsValue: Function,
	field_mapping: object,
	getFieldDecorator: Function,
	defaultFormData: object,
	label?: string,
	required?: any,
	list: any[],
	other_field?: string,
	value: any,
	onChange: Function
}
interface State {
	hasError: boolean,
	errorMsg: string
}
export default class MiSelectOther extends PureComponent<Props, State> {
	public state: State = {
		hasError: false,
		errorMsg: ""
	}
	componentWillReceiveProps(next: Props) {
		let { isReset: oldReset, formData: oldFD } = this.props;
		let { isReset: newReset, formData: newFD, field, dataset_key, getFieldValue, setFieldsValue } = next;
		if (oldReset !== newReset && newReset) {
			this.setState({
				hasError: false
			})
		}
		if (oldFD[field[0]] !== newFD[field[0]]) {
			if (field.length == 1) {
				return;
			}
			if (newFD[field[0]] == -1) {
				console.log(newFD);
			}
			else {
				const { formData, field_mapping = {} } = next;
				let list = next.fd[dataset_key] || [];
				let selectOption = list.filter(item => item.code === formData[field[0]]);
				let otherObj = handleSelect(field, selectOption[0], field_mapping);
				for (let i in otherObj) {
					setTimeout(() => {
						getFieldValue(i);
						setFieldsValue({
							[i]: otherObj[i]
						})
					})
				}
			}
		}
	}

	componentDidMount() {
		setTimeout(() => {
			const { dataset_key, field, setFieldsValue, getFieldValue, fd, field_mapping = {} } = this.props;
			let _dataset_key = dataset_key;
			if (field.length == 1) {
				return;
			}
			const { formData } = this.props;
			let list = fd[_dataset_key] || [];
			console.log(formData[field[0]]);
			if (formData[field[0]] == -1) {

			}
			else {
				let selectOption = list.filter(item => item.code === formData[field[0]]);
				let otherObj = handleSelect(field, selectOption[0], field_mapping);
				for (let i in otherObj) {
					getFieldValue(i);
					setFieldsValue({
						[i]: otherObj[i]
					})
				}
			}
		})
	}
	render() {
		let { getFieldDecorator, field, defaultFormData, label, required, list, formData, other_field } = this.props;
		if (list && list.length > 0) {
			list = list.map(i => {
				return {
					...i,
					label: i.name,
					value: i.code
				}
			})
		}
		list = [list]
		let { hasError, errorMsg } = this.state;
		let isRequired = required == 1;
		return (
			<div>
				{
					field[1] && getFieldDecorator(field[1])(<div></div>)
				}
				{
					getFieldDecorator(field[0], {
						initialValue: defaultFormData[field[0]],
						rules: [
							{
								validator: (rule, value, callback) => {
									if (isRequired) {
										if (isNull(value) && isNull(formData[other_field])) {
											if (!hasError) {
												this.setState({
													hasError: true,
													errorMsg: "请选择：" + label
												})
												callback("请选择：" + label)
											}
										}
										else {
											this.setState({
												hasError: false,
												errorMsg: ""
											})
											callback()
										}
									}
									callback()
								}
							}
						]
					})(
						<MySelectOther {...this.props} hasError={hasError} errorMsg={errorMsg} />
					)
				}
			</div>
		)
	}
}
